<template>
    <div style="background-color: aquamarine;">
        <h1>slot插槽</h1>
        <SonSlot></SonSlot>
        <h3>插槽用于决定父组件将所携带的数据内容，插入到子组件指定的某个位置，从而使模块分块，具有模块化的特质和更大的重用性</h3>
        <h2>1.默认插槽</h2>
        <h3>默认插槽使在组件模版中定义的，它允许父组件将内容传递给子组件</h3>
        <h3>使用方法：在子组件模板中使用特殊的slot标签，就可以为子组件开启一个插槽，然后在父组件中，将需要传递的内容放在子组件标签内部即可</h3>
        <h3>插入在子组件标签里面的内容，将替换子组件slot标签以及它的内容</h3>
        <SonSlot>
            <template v-slot:default>
                <div>
                    我是父组件呈现在子组件内部的内容
                </div>
            </template>
        </SonSlot>
        <h2>2.具名插槽</h2>
        <h3>v-slot指令将内容定向到指定名字的插槽，v-slot简写成#</h3>
        <SonSlot>
            <template v-slot:btn>
                <div>
                    <span style="background-color: deeppink;">张三</span>
                </div>
            </template>
            <template #msg>
                <div>
                    <span style="background-color: chartreuse;">很棒</span>
                </div>
            </template>
        </SonSlot>
        <h3>3.作用域插槽</h3>
        <h2>在封装组件时，为预留的slot提供属性对应值，这种用法叫做作用域插槽</h2>
        <SonSlot>
            <template v-slot:default>
                <div>
                    商品展示
                </div>
            </template>
            <template #btn>
                <div>
                    商品名称
                </div>
            </template>
            <template #msg>
                <div>
                    商品简介
                </div>
            </template>
            <template #img="{scope}">
                <div>
                    <img :src="scope" alt="">
                </div>
            </template>
        </SonSlot>
    </div>
</template>

<script>
import SonSlot from '@/components/SonSlot.vue';

export default {
    components:{
        SonSlot
    }
}
</script>